<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				background: palegreen;
				/* 子元素文字一起透明 */
				/* opacity: .5; */
				/* 只改变背景，不会影响子元素 */
				/* background: rgba(255,255,100,.5); */
			}
			#test{
				/* 不会保留元素的位置 */
				display: none;
				/* 会保留元素的位置 */
				/* visibility: hidden; */
			}
			#test:checked+.box{
				background: palevioletred;
			}
			
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			#toggle{
				display: none;
			}
			/* 
				
				~ 找到这个元素的兄弟元素
				+ 找到紧挨着这个元素的兄弟元素
			 
			*/
			#toggle:checked~.navigator{
				height: 100vh;
				left: 0;
			}
			.test{
				margin-bottom: 15px;
			}
			.test span{
				display: block;
				width: 30px;
				height: 3px;
				background: #000000;
				margin: 5px 0;
				position: relative;
				transition: all .3s linear;
			}
			#toggle:checked+.test span:nth-child(1){
				transform: rotate(45deg);
				top: 8px;
			}
			#toggle:checked+.test span:nth-child(2){
				display: none;
			}
			#toggle:checked+.test span:nth-child(3){
				transform: rotate(-45deg);
			}
			.navigator{
				position: absolute;
				top: 30px;
				left: -100vw;
				width: 100vw;
				height: 0;
				background: paleturquoise;
				transition: all .7s linear;
			}
		</style>
	</head>
	<body>
		
		<!-- <label for="test">点击复选框</label>
		<br>
		<input  id="test" type="checkbox">
		<div class="box">孙子、孙女们都忘了吧</div> -->	
		
		<nav>
			<div>
				<input type="checkbox" id="toggle">
				<label class="test" for="toggle">
					<span></span>
					<span></span>
					<span></span>
				</label>
				<div class="navigator"></div>
			</div>
			
		</nav>
		
		
	</body>
</html>
